<template>
  <div>
    <a-card>
    <a-form layout="vertical">
      <a-form-item label="标题">
        <a-input v-model:value="gatewayId" disabled maxlength="32" @change="updateElementId" />
      </a-form-item>
      <a-form-item label="编码">
        <a-input v-model:value="gatewayName" maxlength="20" @change="updateElementName" />
      </a-form-item>
      <a-form-item v-if="isHandlerSelectNode" label="可决策节点">
        <a-select v-model:value="gateEntity.DECIDABLE_NODES" placeholder="" >
          <a-select-option key="0">上一步节点</a-select-option>
          <a-select-option key="1">起草节点</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="!isJoinGateway&&!isHandlerSelectNode&&!isParallelGateway" label="启动方式">
        <a-select v-model:value="gateEntity.ACTION_TYPE" placeholder="" :options="condtionOptions" />
      </a-form-item>
      <a-form-item v-if="isJoinGateway" label="结束方式">
        <a-select v-model:value="gateEntity.END_TYPE" placeholder="">
          <a-select-option key="0">全部结束</a-select-option>
          <a-select-option key="1">任意结束</a-select-option>
          <a-select-option key="2">条件结束</a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item v-if="!isJoinGateway&&isParallelGateway" label="启动方式">
        <a-select v-model:value="gateEntity.GATEWAY_RUN_TYPE" placeholder="" :options="ParallelGatewayOptions" />
      </a-form-item>
      <a-form-item v-if="!isHandlerSelectNode&&(gateEntity.GATEWAY_RUN_TYPE==='2'||!isParallelGateway)" label="设置走向">
        <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
        <a-space>
          <div style="overflow: auto;" class="tagboxs">
            <a-input maxlength="20" />
          </div>
        </a-space>
        <a-button style="margin-left: auto;" size="small" secondary type="info" @click="openImportWindow">
          <template #icon>
            <a-icon><svg-icon name="touxiang" size="18" /></a-icon>
          </template>请选择
        </a-button>        
      </div>
      </a-form-item>
      
      <a-form-item v-if="!isParallelGateway||['1','2'].includes(gateEntity.GATEWAY_RUN_TYPE)" label="默认走向">
        <a-select v-model:value="gateEntity.FIRST_WAY" placeholder="请选择默认走向" :options="taskOptions"  @change="selectTask"  />
      </a-form-item>
    </a-form>
  </a-card>
  </div>
</template>



<script setup lang="tsx">
import { type PropType, ref, unref, reactive, h, onBeforeUnmount, onMounted } from 'vue';
import { useModal } from '@/hooks/useModal/useModal';
import GateWayInfo from '@/components/design/components//Panel/components/SubChild/GateWayInfo.vue';
import { condtionOptions,ParallelGatewayOptions } from '@/components/design/components/DesignerCommCore/PanelOptions';
import { getNameValue, setNameValue } from '@/components/design/bo-utils/nameUtil';
import editor from '@/store/modules/editor';
import modeler from '@/store/modules/modeler';
import { getBusinessObject, type ModdleElement } from 'bpmn-js/lib/util/ModelUtil';
import { debounce } from 'lodash-es';
import * as CU from '@/components/design/bo-utils/conditionUtil';
import {  SelectProps, Cascader, Select } from 'ant-design-vue';
import {taskAttr} from '@/store/modules/taskAttr';
import {gateWayAttr} from '@/store/modules/gateWay';

const gateWayAttrStore = gateWayAttr();
const gateEntity = ref<object>({});
const gatewayId = ref("");
const gatewayName= ref("");
const taskOptions=ref<SelectProps['options']> ([

]);
const decidable_nodes=ref<SelectProps['options']> ([

]);

//const selectTask=(value)=>{
const selectTask: SelectProps['onChange'] = value => {  
  let currentElement = modeler().getActive as Element;
  const modeling = modeler().getModeling;  
  const outGoingWay=currentElement.outgoing;
  outGoingWay.forEach((way)=>{
    CU.setConditionExpressionValue(way,`\${${way.id}==true }`);
    // if(way.businessObject.targetRef.id==value){
    //   // //default与表达式只能生效一个
    //   // 、、CU.setConditionTypeValue(way,"default");
    //   CU.setConditionExpressionValue(way,`\${${way.id}==true }`);
          
    // }
    // else{
    //   CU.setConditionExpressionValue(way,`\${${way.id}==true }`); 
    // }     
  });  
  
}
let scopedElement: BpmnElement | undefined = undefined;
let scopedBO: ModdleElement | undefined = undefined;

function updateElementName() {
  let currentElement = modeler().getActive as Element;
  console.log(currentElement,"currentElement111111111111111111111")
  
  const targetGateway = gateWayAttrStore.gateWays.find(
    item => item.GATEWAY_NO === gatewayId.value
  );

  if (targetGateway) {
    const updatedGateway = {
      ...targetGateway,
      GATEWAY_NAME: gatewayName.value
    };
  
    const index = gateWayAttrStore.gateWays.findIndex(
      item => item.GATEWAY_NO === gatewayId.value
    );
  
    if (index !== -1) {
      gateWayAttrStore.gateWays.splice(index, 1, updatedGateway);
    }
  }
  console.log(gateWayAttrStore.gateWays,'gateWayInfo8888888888888888888888888888');
  setNameValue(modeler().getActive as Element, gatewayName.value); 
  
  //gateWayAttrStore.updateGateWayByNo(gatewayId.value,gateWayInfo);
}
function updateElementId() {
  setIdValue(modeler().getActive as Element, gatewayId.value);  
}

const updateUserAssignProp = (key: string, value: string) => {
  updateExModdleProp(scopedElement!, scopedBO!, key, "${" + value + "}");
};
const updateExModdleProp = debounce(
  function (
    element: BpmnElement,
    moddleElement: ModdleElement,
    propKey: string,
    propValue: unknown,
  ) {
    const modeling = modeler().getModeling;
    const exPropKey = `${editor().getProcessEngine}:${propKey}`;    
    modeling!.updateModdleProperties(element, moddleElement, {
      [exPropKey]: propValue === '' ? undefined : propValue,
    });
  },
  300,
  { leading: true },
);
const [ModalRender, modalRef] = useModal();
const editFormRef = ref<any>(null);
const isHandlerSelectNode=ref<Boolean>(false);
const isParallelGateway=ref<Boolean>(false);
const isJoinGateway=ref<Boolean>(false);
onMounted(() => {  
  console.log(gateWayAttrStore.gateWays,"gateWayAttrStore1111111111111")
  let currentElement = modeler().getActive as Element;  
  gatewayId.value = currentElement.id;
  gatewayName.value = currentElement.businessObject.name;
  const index = gateWayAttrStore.gateWays.findIndex(item => item.GATEWAY_NO === currentElement.id);  
  if (index !== -1) {  
    gateEntity.value=gateWayAttrStore.gateWays[index];
  }
  console.log(gateEntity.value,"gateEntity.value1111111111111")
  var outGoingWay=currentElement.outgoing;
  outGoingWay.forEach((way)=>{
    var seque={
      label:way.businessObject.targetRef.name,
      value:way.businessObject.targetRef.id
    };    
    taskOptions.value.push(seque);
  });

  const inComingWay=currentElement.incoming;
  inComingWay.forEach((way)=>{
    var seque={
      label:way.businessObject.sourceRef.name,
      value:way.businessObject.sourceRef.id
    };    
    decidable_nodes.value.push(seque);
  });
  
  if(currentElement.businessObject.extended!==undefined&&currentElement.businessObject.extended.GatewayType==="handSelect")
  {
    isHandlerSelectNode.value=true;
  }
  if(currentElement.type==="bpmn:InclusiveGateway"){
    isParallelGateway.value=true;
  }
  if(currentElement.businessObject.extended!==undefined&&currentElement.businessObject.extended.GatewayType==="JoinGateway")
  {
    isJoinGateway.value=true;
  }
});
const openImportWindow = () => {
  ModalRender.show({
    title: '条件分支设置走向',
    width: '50%',
    // 是否显示右上角
    defaultExtra: true,
    destroyOnClose: true,
    content: () => {
      return <GateWayInfo ref={editFormRef} style="height:40vh;width:100%;overflow: auto;"></GateWayInfo>;
    },
    // 确定方法执行
    onOk: async () => {
      const refData = await editFormRef.value?.handleSubmit();      
      
    },
  });
};
</script>
